import React, { PureComponent } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { Card, Row, Col, Icon, Modal, List, Button, Spin, Input, Popconfirm, Empty } from 'antd';
import Ellipsis from '@/components/Ellipsis';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './CardList.less';

const { Meta } = Card;

@connect(({ competition }) => ({
  reviewList: competition.reviewList,
}))
class RiviewCompetitionList extends PureComponent {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'competition/getCompetitionReviewList',
    })
  }

  handlePreview = (id)=>{
    router.push(`/preview/competition/${id}/grade`)
  }


  render() {
    const { reviewList } = this.props;
    const operationTabList = [
      {
        key: 'public',
        tab: (
          <span>
            待评审的竞赛 <span style={{ fontSize: 14 }}>({reviewList && reviewList.length})</span>
          </span>
        ),
      },
    ];
    console.log("list",reviewList)
    return (
      <PageHeaderWrapper>
        <Row gutter={24}>
          <Col lg={24} md={24}>
            <Card
              tabList={operationTabList}
            >
              <List
                rowKey="id"
                grid={{ gutter: 24, lg: 4, md: 3, sm: 2, xs: 1 }}
                dataSource={reviewList}
                renderItem={item =>
                  item ? (
                    <List.Item key={item.competitionVo&&item.competitionVo.id}>
                      <Card
                        bordered
                        hoverable
                        className={styles.card}
                        cover={item.advertisePictureVo !== null && item.advertisePictureVo.advertisePictureBig !== null ?
                          <img onClick={() => this.handlePreview(item.competitionVo&&item.competitionVo.id)} alt="example" src={`http://localhost:8080/image/${item.advertisePictureVo.advertisePictureBig}`}/> :
                          <Empty image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original" />}
                      >
                        <Card.Meta
                          onClick={() => this.handlePreview(item.competitionVo&&item.competitionVo.id)}
                          // avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
                          title={item.competitionInformationVo !== null && item.competitionInformationVo.name}
                          description={
                            <Ellipsis tooltip className={styles.item} lines={2}>
                              {item.competitionInformationVo !== null && item.competitionInformationVo.competitionIntroduction !== null ?
                                <p dangerouslySetInnerHTML={{ __html: item.competitionInformationVo.competitionIntroduction }} />
                                : <Empty image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original" />
                              }
                            </Ellipsis>
                          }
                        />
                      </Card>
                    </List.Item>
                  ) : (
                      <List.Item>

                      </List.Item>
                    )
                }
              />
            </Card>
          </Col>
        </Row>
      </PageHeaderWrapper>
    );
  }
}

export default RiviewCompetitionList;
